<!-- 好友详情 -->
<template>
	<view class="column-div" style="width: 100%;height: calc(100vh - 200upx);">
		
		<view class="column-div detail-card">
			<view class="row-div profilePicture-view">
				<image :src="imgSite+details.avatar" mode=""></image>
			</view>
			<view class="column-div detail-name"  style="width: 100%;">
				<view style="font-size: 36upx;margin-top: 45upx;" >{{details.nickname}}</view>
				<view class="row-around" style="margin-top: 30upx;">
					<view class="column-div">
						<view class="num">{{details.yesterdayStatistical.buddyContribution}}</view>
						<view class="text">昨日贡献值</view>
					</view>
					<view class="boderView"></view>
					<view class="column-div">
						<view class="num">{{details.buddyContribution}}</view>
						<view class="text">总贡献值</view>
					</view>
				</view>
			</view>
			
			<view class="detail-list">
				<view class="row-between detail-list-item">
					<view>是否实名</view>
					<view v-if="details.realNameFlag == '10'">已实名</view>
					<view v-else>未实名</view>
				</view>
				<view class="row-between detail-list-item">
					<view>联系电话</view>
					<view>{{details.telephone}}</view>
				</view>
				<view class="row-between detail-list-item">
					<view>注册日期</view>
					<view>{{details.registerTime}}</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'downUrl', 'imgSite', 'url'])
		},
		data() {
			return {
				details:{}
			}
		},
		onLoad(options) {
			this.details = JSON.parse(options.detail)
			
			console.log(this.details)
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	
	.detail-card{
		width: 643upx;
		margin: auto;
		position: relative;
		// margin-top: 230upx;
		background: #FFFFFF;
		border-radius: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		
		.profilePicture-view{
			width: 120upx;
			height: 120upx;
			background: #FFFFFF;
			border: 1upx solid #FF7E00;
			border-radius: 50%;
			position: absolute;
			top: 0upx;
			left: 50%;
			transform: translate(-50%, -50%);
			image{
				width: 102upx;
				height: 102upx;
			}
			z-index: 99;
		}
		
		.detail-name{
			position: relative;
			height: 270upx;
			background: #FFE3C7;
			border-radius: 10upx 10upx 0upx 0upx;
			&::before{
				content: " ";
				position: absolute;
				width: 100%;
				height: 270upx;
				background-image: url(/static/assets/friendsDetailsBg.png);
				background-size: 100%;
				top: 0;
				left: 0;
			}
			.num{
				font-size: 40upx;
				font-weight: bold;
				margin-bottom: 15upx;
			}
			.text{
				font-size: 24upx;
				font-weight: 500;
			}
		}
		
		.detail-list{
			width: 100%;
			padding: 0upx 42upx;
			font-size: 26upx;
			color: #999999;
			.detail-list-item{
				padding: 50upx 0upx;
				border-top: 1upx solid #EEEEEE;
				view:last-of-type{
					color: #333333;
					margin-right: 15upx;
				}
				&:first-of-type{
					border-top: none;
				}
			}
			
		}
	}

	.boderView{
		width: 2upx;
		height: 68upx;
		background: #E1BBB6;
		opacity: 0.5;
		border-radius: 10upx 10upx 0upx 0upx;
		margin: 0upx 110upx;
	}
</style>
